<template>
	<view class="seacherpage">
		<view class="search-content">
			<uni-data-select
				class="search-head"
			      v-model="value"
			      :localdata="range"
			      @change="change"
				  :clear="false"
			></uni-data-select>
			<input class="uni-input" @input="inputFn" focus placeholder="请输入想搜索的内容" />
			</view>
      <!-- 搜索结果列表 -->
      <view class="list">
        <view class="list-item" @click="toDetail(item)" v-for="item in searchList" :key="item.id">
          <view class="">
            <text class="title" v-if="value === 0">{{item.name}}</text>
            <text class="title" v-else>{{item.title}}</text> 
          </view>
          <div>
            <text class="address" v-if="value === 0">{{item.address}}</text>
            <text class="address" v-else>{{item.buildingName}}</text>
          </div>
          
          <!-- <text class="address">{{item.address}}</text> -->
        </view>       
      </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 0,
				range: [
					{ value: 0, text: "搜新房" },
				    { value: 1, text: "搜二手房" },
				    { value: 2, text: "搜租房" },
				],
        timer:null,
        kw:'',
        searchList:[]
			}
		},
		methods: {
      toDetail(item) {
        if(this.value === 0) {
          uni.navigateTo({
            url:'/subpages/newhouse-details/newhouse-details?id=' + item.id
          })
        }else if(this.value === 1) {
          uni.navigateTo({
            url:'/subpages/ershouhouse-detail/ershouhouse-detail?id=' + item.id
          })
          
        }else {
          uni.navigateTo({
            url:'/subpages/zuhouse-detail/zuhhouse-detail?id=' + item.id
          })
          
          
        }
      },
			change(e) {
			      console.log("选择的名称:", e);
			    },
      inputFn(e) {
        console.log(e)
        this.timer = setTimeout(() => {
          console.log(e.detail.value)
          clearTimeout(this.timer)
          this.kw = e.detail.value
          if(this.kw.length === 0) {
            this.searchList = []
            return
          }
          this.getSearch()
          // this.searchList = []
          
        },500)
        
      },
     async getSearch() {
        if(this.value === 0) {
          // 新房
          let obj = {
            pageNo:1,
            pageSize:100000000,
            new:true,
            buildingName:this.kw
          }
       const res =  await uni.$http.get('/building/page',obj)
       this.searchList = res.data.data.records
        } else if(this.value === 1) {
          let obj = {
               pageNo:1,
               pageSize:100000000,
               status:2,
               buildingName:this.kw
             }
          const res =  await uni.$http.get('/house/page',obj)
           this.searchList = res.data.data.records
          
        }else {
          let obj = {
               pageNo:1,
               pageSize:100000000,
               status:2,
               buildingName:this.kw
             }
          const res =  await uni.$http.get('/rental/page',obj)
           this.searchList = res.data.data.records
          
        }
        
      }
		}
	}
</script>

<style lang="scss">
	.seacherpage{
		width: 100%;
		padding: 0 1%;
		// background: #ffffff;
		.search-content{
			margin-top: 10rpx;
			width: 97%;
			height: 100rpx;
			display: flex;
			background-color: #eff8ff;
			border: 1px solid #eceded;
			.search-head{
				height: 100%;
				width: 25%;
				 .uni-stat__select{
					height: 100%;
					.uni-select{
						border: 0 !important;
					}
				}
			}
			.uni-input{
				height: 100%;
				line-height: 100%;
				width: 75%;
			}
			
		}
    .list {
      width: 100%;
      
      .list-item {
        padding:0 20rpx;
        // margin-left: 190rpx;
        background-color: #eff8ff;
        // width: 560rpx;
        height: 100rpx;
        line-height: 100rpx;
        border-bottom: 1px solid grey;
        display: flex;
        // flex-direction: column;
        justify-content: space-between;
        .title {
          font-size: 14px;
        }
        .address {
          font-size: 12px;
          color: lightgray;
        }
        
      }
    }
	}
	
</style>
